<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品台账</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              <i class="el-icon-s-tools"></i> &nbsp; 管理信息
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <div class="grid-content bg-purple">
            <el-button size="small" type="primary" icon="el-icon-download"
              >台账下载</el-button
            >
            <el-button size="small" type="primary" icon="el-icon-upload2"
              >台账导入</el-button
            >
            <el-button size="small" type="primary" icon="el-icon-tickets"
              >操作记录</el-button
            >
          </div>
        </el-col>
      </el-row>
      <div class="divider"></div>

      <el-row :gutter="15" class="whererow">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品名称</p>
            <el-input
              size="small"
              v-model="input"
              placeholder="商品名称"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品编号</p>
            <el-input
              size="small"
              v-model="input"
              placeholder="商品名称"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品类别</p>
            <el-cascader
              size="small"
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品品牌</p>
            <el-cascader
              size="small"
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">上架状态</p>
            <el-cascader
              size="small"
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="15" class="whererow">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品标签</p>
            <el-cascader
              size="small"
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品库存（小于等于）</p>
            <el-input
              size="small"
              v-model="input"
              placeholder="商品名称"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">审核状态</p>
            <el-cascader
              size="small"
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">商品状态</p>
            <el-cascader
              size="small"
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">物流仓库</p>
            <el-cascader
              size="small"
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="15" class="whererow">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <p class="label">配送模板</p>
            <el-cascader
              size="small"
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <p class="label">售价区间</p>
            <el-input
              style="width: 80px"
              size="small"
              v-model="input"
              placeholder="最低"
            ></el-input>
            -
            <el-input
              style="width: 80px"
              size="small"
              v-model="input"
              placeholder="最高"
            ></el-input>
          </div>
        </el-col>

        <el-col :span="4">
          <p class="label">&nbsp;</p>
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="primary" size="mini" plain>重置</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="noticerow box">
      <i class="el-icon-document"></i> &nbsp; SPU列表
    </div>

    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column align="center" label="编号" width="100">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="封面图片" width="130">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.pictures?scope.row.pictures.split(',')[0]:''"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="价格"
        width="80"
        :sort-method="handleSortChange"
      >
        <template slot-scope="scope">{{ scope.row.listPrice }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="货号"
        width="80"
        :sort-method="handleSortChange"
      >
        <template slot-scope="scope">{{ scope.row.typeNumber }}</template>
      </el-table-column>
      <el-table-column align="center" label="标签" width="120">
        <template slot-scope="scope">
          <p>
            上架：<el-switch
              v-model="scope.row.published"
              active-color="#1aa"
              inactive-color="#aaa"
            ></el-switch>
          </p>
          <p>
            推荐：<el-switch
              v-model="scope.row.recommend"
              active-color="#1aa"
              inactive-color="#aaa"
            ></el-switch>
          </p>
          <p>
            新品：<el-switch
              v-model="scope.row.newArrival"
              active-color="#1aa"
              inactive-color="#aaa"
            ></el-switch>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序" width="60">
        <template slot-scope="scope">{{ scope.row.sort }}</template>
      </el-table-column>
      <el-table-column align="center" label="SKU设置" width="100">
        <template slot-scope="scope">
          <router-link :to="`/home/product/skumanage/${scope.row.id}`">
            <el-button type="primary" icon="el-icon-coin" circle></el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column align="center" label="销量/库存" width="120">
        <template slot-scope="scope">
          <p>{{ scope.row.sales }}/{{ scope.row.stock }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态" width="100">
        <template slot-scope="scope">{{
          scope.row.checked == 1 ? "已审核" : "未审核"
        }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="170">
        <template slot-scope="scope">
          <el-button
            title="查看"
            type="primary"
            size="mini"
            icon="el-icon-view"
            circle
            @click="$router.push('#' + scope.row.id)"
          ></el-button>
          <el-button
            title="编辑"
            type="warning"
            size="mini"
            icon="el-icon-edit"
            circle
            @click="$router.push('#' + scope.row.id)"
          ></el-button>
          <el-button
            title="删除"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            circle
            @click="$router.push('#' + scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-cascader
        size="small"
        v-model="value"
        :options="options"
      ></el-cascader>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 表示当前页码
      pageSize: 5, // 表示每页多少条
      total: 1, // 表示总条目数
      input: "", // 绑定多条件筛选查询文本框的值（临时）
      value: [], // 绑定多条件筛选查询文本框的值（临时）
      tableData: [], // 绑定表格数据
      options: []
    };
  },

  /**
   * 页面挂载完毕后加载spu列表
   */
  mounted() {
    this.loadSpuList();
  },

  methods: {
    /**
     * 加载spu列表
     */
    loadSpuList() {
      let page = this.currentPage;
      let pageSize = this.pageSize;
      this.$api.spuApi.query({ page, pageSize }).then((res) => {
        console.log(res);
        if (res.data.state == 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$alert(res.data.message, "提示");
        }
      });
    },

    /**
     * 处理点击当前页码后的业务
     */
    handleCurrentChange(val) {
      console.log(`即将加载选中页: 第${val}页`);
      this.currentPage = val;
      this.loadSpuList();
    },

    handleSortChange(a, b) {
      return a.price - b.price;
    },
  },
};
</script>
